import { Button, Modal, Form, Input, message } from 'antd';
import { useState } from 'react';
import { publish } from '../../api/news';
import { useAuth } from '../../context/AuthProvider';

const { TextArea } = Input;

const SubDraft = ({draft,setDraft}) => {
    const [isModalOpen, setIsModalOpen] = useState(false);

    const { user } = useAuth();
  
    const onFinish = (values) => {
        let data = {...values,draftUser:user.userId}

        publish(data).then(res => {
            setDraft({...draft,content:[{...res.data,user},...draft.content]})
            setIsModalOpen(false);
            message.success('发布成功！')
        })
    }

    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    return (
        <>
        <Button type="primary" onClick={showModal}>
            新增投稿
        </Button>
        <Modal title="新增投稿" open={isModalOpen} onCancel={handleCancel} footer={null}>
            <Form onFinish={onFinish}>
                <Form.Item label='标题' name='draftTitle'>
                    <Input placeholder="请输入标题..." style={{width:'300px'}} />
                </Form.Item>

                <Form.Item label='内容' name='draftContext'>
                    <TextArea rows={4} placeholder="请输入内容..." style={{width:'300px'}} />
                </Form.Item>

                <Form.Item>
                    <Button type='primary' htmlType="submit" style={{marginTop:'20px'}}  >发布</Button>
                </Form.Item>
            </Form>
        </Modal>
        </>
    );
};
export default SubDraft;